import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

//复杂一点的布局展示
class ComplexLayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Widget addressContainer = Container(
      padding: const EdgeInsets.all(32.0),
      child: Row(
       // crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(
                  '风景区地址',
                  style: TextStyle(
                    fontSize: 15.0,
                    fontWeight: FontWeight.w700,
                    color: Colors.lightGreen[600],
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(top: 10.0),
                  child: Text(
                    '湖北省十堰市丹江口市hello warld 湖北省十堰市丹江口市hello warld 湖北省十堰市丹江口市hello warld 湖北省十堰市丹江口市hello warld',
                    style: TextStyle(
                      fontSize: 15.0,
                      fontWeight: FontWeight.w300,
                      color: Colors.grey[400],
                      height: 1.3,
                      //行高，需要注意的是这里的值是个比例值(相当于Android中的行间距)
                    ),
                    //maxLines: 2,
                    //overflow: TextOverflow.ellipsis,
                  ),
                ),
              ],
            ),
          ),
          Container(
            height: 100,//这里高度写死， AlignmentDirectional.centerStart 才会起作用
            alignment: AlignmentDirectional.topStart,
            margin: EdgeInsets.only(left: 5.0),
            child: Row(
              children: <Widget>[
                Icon(
                  Icons.star,
                  color: Colors.lightGreen[600],
                ),
                Text(
                  '61',
                  style: TextStyle(
                    fontSize: 15.0,
                    fontWeight: FontWeight.w400,
                    color: Colors.red[600],
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );

    Widget buttonsContainer = Container(
      //margin: EdgeInsets.only(top: 20.0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround, //水平方向均匀排列每个元素
        children: <Widget>[
          buildButtonColumn(Icons.call, '电话'),
          buildButtonColumn(Icons.near_me, '导航'),
          buildButtonColumn(Icons.share, '分享'),
        ],
      ),
    );

    Widget textContainer = Container(
      padding: const EdgeInsets.all(32.0),
      child: Text(
        '''
        武当山，中国道教圣地，又名太和山、谢罗山、参上山、仙室山，古有“太岳”、“玄岳”、“大岳”之称。位于湖北西北部十堰市丹江口市境内。东接闻名古城襄阳市，西靠车城十堰市 ，南望原始森林神农架，北临高峡平湖 丹江口水库。
        明代，武当山被皇帝封为“大岳”、“治世玄岳”，被尊为“皇室家庙”。武当山以“四大名山皆拱揖，五方仙岳共朝宗”的“五岳之冠”地位闻名于世。
        1994年12月，武当山古建筑群入选《世界遗产名录》，2006年被整体列为“全国重点文物保护单位” 。2007年，武当山和长城、丽江、周庄等景区一起入选 “欧洲人最喜爱的中国十大景区”。2010至2013年，武当山分别被评为国家5A级旅游区、国家森林公园、中国十大避暑名山、海峡两岸交流基地，入选最美 “国家地质公园”。 
        截至2013年，武当山有古建筑53处，建筑面积2.7万平方米，建筑遗址9处，占地面积20多万平方米，全山保存各类文物5035件。 
        武当山是道教名山和武当武术的发源地，被称为“亘古无双胜境，天下第一仙山”。武当武术，是中华武术的重要流派。元末明初，道士张三丰集其大成，开创武当派。
        ''',
        softWrap: true,
        style: TextStyle(
          fontFamily: "myfont",
        ),
      ),
    );

    return MaterialApp(
      theme: ThemeData(
        brightness: Brightness.light, //应用程序整体主题的亮度
        primaryColor: Colors.lightGreen[600], //App主要部分的背景色
        accentColor: Colors.orange[600], //前景色（文本、按钮等）
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            '武当山风景区',
            style: TextStyle(color: Colors.white),
          ),
          centerTitle: true,
          leading: IconButton(
            icon: Icon(
              Icons.arrow_back,
              color: Colors.white,
            ),
            onPressed: () {
              Navigator.of(context).pop(1);
            },
          ),
        ),
        body: ListView(
          children: <Widget>[
            Image.asset(
              'assets/images/wudang.jpeg',
              width: 600.0,
              height: 240.0,
              fit: BoxFit.cover,
            ),

            //风景地址
            addressContainer,
            //电话 导航 分享
            buttonsContainer,
            //长文本
            textContainer,
          ],
        ),
      ),
    );
  }

  //构建按钮组中单个按钮 参数为图标及文本
  Column buildButtonColumn(IconData icon, String label) {
    //垂直布局
    return Column(
      mainAxisSize: MainAxisSize.min, //垂直方向大小最小化
      mainAxisAlignment: MainAxisAlignment.center, //垂直方向居中对齐
      children: <Widget>[
        Icon(icon, color: Colors.lightGreen[600]), //上面图标部分
        Container(
          //距离上面图标一定间距
          margin: const EdgeInsets.only(top: 8.0),
          //下面文本部分
          child: Text(
            label,
            style: TextStyle(
              fontSize: 12.0,
              fontWeight: FontWeight.w400, //字体粗细设置
              color: Colors.lightGreen[600],
            ),
          ),
        )
      ],
    );
  }
}
